<script setup lang="ts">
import { ODivider, ODropdown, ODropdownItem, OIcon } from '@opensig/opendesign';
import IconChevronDown from '~icons/app/icon-chevron-down.svg';
</script>

<template>
  <div class="header-lang">
    <ODropdown trigger="hover" optionPosition="bottom" option-wrap-class="lang-dropdown">
      <div class="info-wrap hover-icon-rotate">
        <span class="lang">中文</span>
        <OIcon class="icon"><IconChevronDown /></OIcon>
      </div>

      <template #dropdown>
        <ODropdownItem>简体中文</ODropdownItem>
        <ODivider :style="{ '--o-divider-gap': '2px' }" />
        <ODropdownItem>English</ODropdownItem>
      </template>
    </ODropdown>
  </div>
</template>

<style lang="scss" scoped>
.header-lang {
  height: 100%;
  display: none;
  align-items: center;
  margin-right: 16px;
}
.lang {
  @include tip1;
  color: var(--o-color-info2);
  margin-right: 4px;
}
.o-dropdown {
  height: 100%;
}
.info-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.o-dropdown-item {
  @include text1;
  width: 136px;
  white-space: nowrap;
}
</style>

<style lang="scss">
.lang-dropdown {
  --dropdown-list-radius: var(--o-radius-m);
}
</style>
